<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv.js"></script>
    <script src="lib/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导航 菜单 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img alt="约书亚CMS" src="image/logo_420-416.png">CMS</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">首页</a></li>
                <li class="active"><a href="#">笔记</a></li>
                <li><a href="#contact">话题</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href=""><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
            </ul>
            <form class="navbar-form navbar-right" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for..."  id="input_search">
                      <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                      </span>
                </div>
            </form>


        </div><!--/.navbar-collapse -->
    </div>
</div>

<!-- 内容 -->
<div class="container-fluid" style="padding-top: 20px">
    <div class="row">
        <div class="col-sm-9" id="column-left">
            <div class="titleBar bs-callout bs-callout-info">
                <h3>文章</h3>
            </div>
            <!-- 分类 -->
            <div class="well well-sm">
                <div class="row">
                    <div class="col-md-12 article-category ">
                        <span>分类:</span>
                        <a class="selected" href="#">全部</a>
                        <a href="#">Javascript</a>
                        <a href="#">Node.js</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 article-category ">
                        <span>类型:</span>
                        <a class="selected" href="#">全部</a>
                        <a href="#">随笔</a>
                        <a href="#">译文</a>
                        <a href="#">教程</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 article-category ">
                        <span>属性:</span>
                        <a class="selected" href="#">全部</a>
                        <a href="#">原创</a>
                        <a href="#">转载</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 article-category ">
                        <span>排序:</span>
                        <a class="selected" href="#">最新发布</a>
                        <a href="#">浏览最多</a>
                        <a href="#">评论最多</a>
                        <a href="#">点赞最多</a>
                        <a href="#">收藏最多</a>
                    </div>
                </div>
            </div>

            <!-- 文章列表 -->
            <div class="row">
                <div class="col-md-12 recommend-article">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="article-detail.html" class="article-title"> 用html5-canvas画的时钟</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>类型：<i>原创-随笔</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/noavatar_small.gif" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="#" class="article-title"> Middle aligned media</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="#" class="article-title"> Middle aligned media</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>类型：<i>原创-随笔</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/noavatar_small.gif" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="#" class="article-title"> Middle aligned media</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="#" class="article-title"> Middle aligned media</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>类型：<i>原创-随笔</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/noavatar_small.gif" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <a href="#" class="article-title"> Middle aligned media</a></h4>
                            <div class="article-extend-info alert alert-gray-lighter">
                                <span>浏览:<i>427</i></span>
                                <span>回复：<i>3</i></span>
                                <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                            </div>
                        </div>
                        <div class="intro">
                            关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3"  id="column-right">
            <div class="row">
                <div class="col-lg-12 " ><button class="btn btn-block btn-primary btn-lg glyphicon glyphicon-pencil">写文章</button></div>
            </div>

            <div class="row"style="margin-top: 5px">
                <div class="col-sm-6" >
                    <span>总笔记:</span><label class="text-info"><b class="fs16">19,495</b></label>
                </div>
                <div class="col-sm-6" >
                    <span>总阅读:</span> <label class="text-info"><b class="fs16">12,943,771</b></label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 articles-writing" >
                    <span>正在写文章：</span>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                </div>
            </div>

            <!--推荐文章-->
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>推荐文章</h3>
                    </div>
                    <div class="article-top20 clearfix">
                        <ul>
                            <li><a href="#"><i class="toprank_blue">1</i>我的右键菜单，我做主！</a></li>
                            <li><a><i class="toprank_blue">2</i>web前端35个jQuery小技巧！</a></li>
                            <li><a><i class="toprank_blue">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                            <li><a><i>4</i>听说，HTML5和手机传感器更配哦！手机DEMO［内含广告］</a></li>
                            <li><a><i>5</i>重载jQuery对象方法，让animate支持颜色渐变动画</a></li>
                            <li><a><i>6</i>网页进度条</a></li>
                            <li><a><i>7</i>CSS3 绘制 摩天轮 skywheel 转转转！</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--火热文章-->
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>火热文章</h3>
                    </div>
                    <div class="article-top20 clearfix">
                        <ul>
                            <li><a href="#"><i class="toprank_red">1</i>我的右键菜单，我做主！</a></li>
                            <li><a><i class="toprank_red">2</i>web前端35个jQuery小技巧！</a></li>
                            <li><a><i class="toprank_red">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                            <li><a><i>4</i>听说，HTML5和手机传感器更配哦！手机DEMO［内含广告］</a></li>
                            <li><a><i>5</i>重载jQuery对象方法，让animate支持颜色渐变动画</a></li>
                            <li><a><i>6</i>网页进度条</a></li>
                            <li><a><i>7</i>CSS3 绘制 摩天轮 skywheel 转转转！</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--写作达人-->
            <div class="row">
                <div class="col-md-12 articles-writing-top">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>写作达人</h3>
                    </div>

                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <span class="badge" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" title="笔记总数：42">42</span>
                            </h5>
                            <h5 class="media-heading">
                                <a href="#" class="article-title"> Middle aligned media</a>
                            </h5>
                        </div>
                    </div>

                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <span class="badge"  onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" title="笔记总数：42">42</span>
                            </h5>
                            <h5 class="media-heading">
                                <a href="#" class="article-title"> Middle aligned media</a>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>






        </div>
    </div>


</div><!-- /.container -->

<!-- 底部 -->
<div id="footer">
    <div class="container-fluid">
        <div class="row">
            <a href="">关于我们</a>
            <a href="">商务合作</a>
            <a href="">合作案例</a>
            <a href="">商务联系</a>
            <a href="">注册协议</a>
            <a href="">免责声明</a>
            <a href="">版权隐私</a>
            <a href="">新浪微博</a>
        </div>
        <div class="row">
            <p class="text-muted">Copyright © JoshuaIt.com All Rights Reserved. 苏ICP备16010632号</p>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="lib/jquery-1.12.4.min.js"></script>
<script src="lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="lib/scroll.js"></script>
<script src="js/myJs.js"></script>
</body>
</html>
